Chart.js আপনাকে ইন্টার্যাকটিভ এবং ডায়নামিক চার্ট তৈরি করার সুযোগ দেয়, যা চলতে চলতে ডেটা আপডেট এবং রিফ্রেশ করার সুবিধা প্রদান করে। ডায়নামিক ডেটা আপডেট করতে চাইলে আপনাকে chart.update() এবং chart.data ব্যবহার করতে হবে। এটি আপনাকে আপনার চার্টে পরিবর্তনশীল ডেটা প্রদর্শন করতে সাহায্য করবে, যেমন রিয়েল-টাইম ডেটা বা ব্যবহারকারীর ইনপুট অনুযায়ী।
Dynamic Data Update এবং Chart Refresh এর প্রক্রিয়া
ধরা যাক, আপনি একটি লাইভ ডেটা সিস্টেম তৈরি করছেন যেখানে চার্টের ডেটা চলতে চলতে পরিবর্তিত হচ্ছে। এখানে আমরা দেখাবো কিভাবে ডেটা আপডেট এবং চার্ট রিফ্রেশ করা যায়।
উদাহরণ: লাইভ সেলস ডেটা আপডেট
আমরা একটি লাইন চার্ট তৈরি করব যা প্রতি ৫ সেকেন্ড পরপর ডেটা আপডেট করবে।
HTML ফাইল:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Chart Update</title>
</head>
<body>
<h1>Dynamic Sales Data</h1>
<canvas id="salesChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="script.js"></script>
</body>
</html>
JavaScript ফাইল: Dynamic Data Update
script.js:
// Chart.js কনটেক্সট সেটআপ
const ctx = document.getElementById('salesChart').getContext('2d');
// লাইন চার্ট কনফিগারেশন
const salesChart = new Chart(ctx, {
type: 'line', // Chart type: Line Chart
data: {
labels: ['January', 'February', 'March', 'April', 'May'], // এক্স-অক্ষের লেবেল
datasets: [{
label: 'Sales ($)',
data: [10, 20, 30, 40, 50], // প্রাথমিক ডেটা
borderColor: 'rgba(75, 192, 192, 1)', // লাইন রং
borderWidth: 2,
fill: false
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
// ডায়নামিক ডেটা আপডেট এবং চার্ট রিফ্রেশ
let currentData = salesChart.data.datasets[0].data;
let newLabel = 'June'; // নতুন মাসের লেবেল
let newData = 60; // নতুন সেলস ডেটা
// প্রতি ৫ সেকেন্ড পরপর ডেটা আপডেট এবং চার্ট রিফ্রেশ
setInterval(() => {
// নতুন ডেটা এবং লেবেল যোগ করা
salesChart.data.labels.push(newLabel);
salesChart.data.datasets[0].data.push(newData);
// পুরনো লেবেল এবং ডেটা বাদ দেওয়া
salesChart.data.labels.shift();
salesChart.data.datasets[0].data.shift();
// ডেটা আপডেট হওয়ার পর চার্ট রিফ্রেশ করা
salesChart.update();
// পরবর্তী লেবেল এবং ডেটা সেট করা
newLabel = `Month ${salesChart.data.labels.length + 1}`;
newData = Math.floor(Math.random() * 100) + 1; // র্যান্ডম সেলস ডেটা তৈরি
}, 5000); // প্রতি ৫ সেকেন্ডে ডেটা আপডেট
ব্যাখ্যা
- Chart কনফিগারেশন:
labels: এক্স-অক্ষের লেবেল (মাসের নাম)।datasets: সেলস ডেটার জন্য একটি ডেটাসেট ব্যবহার করা হয়েছে। এখানে ডেটার পরিবর্তন ঘটবে।
- Dynamic Data Update:
setInterval(): প্রতি ৫ সেকেন্ড পরপর ফাংশনটি কল করা হবে।push(): নতুন ডেটা এবং লেবেল অ্যারের শেষে যোগ করা হবে।shift(): পুরনো ডেটা এবং লেবেল অ্যার থেকে বাদ দেওয়া হবে।update(): ডেটা পরিবর্তনের পরchart.update()কল করা হয়, যাতে নতুন ডেটা সহ চার্ট রিফ্রেশ হয়।
- Random Data:
- নতুন সেলস ডেটা র্যান্ডমভাবে তৈরি করা হচ্ছে
Math.random()ফাংশন দিয়ে, যা ১ থেকে ১০০ এর মধ্যে সেলস ডেটা তৈরি করবে।
- নতুন সেলস ডেটা র্যান্ডমভাবে তৈরি করা হচ্ছে
Chart.js এর অন্যান্য ডাইনামিক অপশন
১. Real-time Data with WebSockets
আপনি WebSockets ব্যবহার করে রিয়েল-টাইম ডেটা স্ট্রিমিং করতে পারেন। WebSockets এর মাধ্যমে সার্ভার থেকে আসা নতুন ডেটা অবিলম্বে চার্টে আপডেট করা সম্ভব।
২. User Input-based Updates
ব্যবহারকারীর ইনপুট বা ফর্মের মাধ্যমে ডেটা আপডেট করতে চাইলে, আপনি ইভেন্ট লিসেনার ব্যবহার করে ডেটা পরিবর্তন করতে পারেন এবং তারপর chart.update() কল করে চার্ট রিফ্রেশ করতে পারেন।
৩. Animation Control
ডায়নামিক আপডেটের সাথে অ্যানিমেশনও কাস্টমাইজ করা যেতে পারে, যেমন animation.duration অথবা animation.easing কন্ট্রোল করে, যাতে ডেটার পরিবর্তন একভাবে প্রদর্শিত হয়।
salesChart.update({
duration: 500, // অ্যানিমেশনের সময়কাল 500 মিলিসেকেন্ড
easing: 'easeInOutQuad' // ইজিং ফাংশন
});
সারাংশ
Chart.js আপনাকে dynamic data update এবং chart refresh করার জন্য অনেক শক্তিশালী উপায় প্রদান করে। আপনি chart.update() এবং chart.data ব্যবহার করে চলতে চলতে ডেটা পরিবর্তন এবং চার্ট রিফ্রেশ করতে পারেন। এটি রিয়েল-টাইম ডেটা বা ইউজার ইনপুট থেকে ডেটা আপডেট করার জন্য খুবই কার্যকর। setInterval() ব্যবহার করে নির্দিষ্ট সময় অন্তর চার্ট রিফ্রেশ করা যেতে পারে, যা ব্যবহারকারীদের জন্য অত্যন্ত ইন্টার্যাকটিভ অভিজ্ঞতা তৈরি করে।
Read more
